<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>PHS编带校检</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">	
    <link rel="stylesheet" href="./4/lumen/bootstrap.css" media="screen">
    <link rel="stylesheet" href="./_assets/css/custom.min.css">
  </head>
  <body>
  <div class="container">
	<form>
	  <fieldset>
		<legend>PHS编带校检</legend>
		<div class="form-group row">
		  <label class="col-sm-2 col-form-label" for="inputDefault">請掃二維碼:</label>
		  <div class="col-sm-6">
		  <input class="form-control" placeholder="AN1811074-X 35M5 4" id="box" type="text">
		  </div>
		</div>
		<div class="form-group row">
			<div class="col-sm-4">
				<canvas id="RGY" width="200" height="200" style="border:1px solid #c3c3c3;">
				您的浏览器不支持画布元素。
				</canvas>
				<script type="text/javascript">
					var c=document.getElementById("RGY");//document.getElementById("RGY").getContext("2d").fillStyle="#FFFF00"
					var cxt=c.getContext("2d");
					cxt.clearRect(0,0,c.width,c.height); 
					cxt.fillStyle="#FFFF00";
					cxt.beginPath();
					cxt.arc(100,100,100,0,Math.PI*2,true);
					cxt.closePath();
					cxt.fill();
				</script>
			</div>
			<div class="col-sm-6">
				<div class="form-group row">
					<label for="staticEmail" class="col-sm-2 col-form-label">①产品基准工单号:</label>
					<div class="col-sm-6 col-sm-offset-4">
						<input readonly="" class="form-control-plaintext" id="JZdisk1" value="" type="text">
					</div>
				</div>
				<div class="form-group row">
				  <label for="staticEmail" class="col-sm-2 col-form-label">②产品基准色区:</label>
				  <div class="col-sm-6 col-sm-offset-4">
					<input readonly="" class="form-control-plaintext" id="JZdisk2" value="" type="text">
				  </div>
				</div>
				<div class="form-group row">
				  <label for="staticEmail" class="col-sm-2 col-form-label">③产品基准Bin:</label>
				  <div class="col-sm-6 col-sm-offset-4">
					<input readonly="" class="form-control-plaintext" id="JZdisk3" value="" type="text">
				  </div>
				</div>
				<div class="form-group row">
					<label for="staticEmail" class="col-sm-2 col-form-label">①当前工单号:</label>
					<div class="col-sm-6 col-sm-offset-4">
						<input readonly="" class="form-control-plaintext" id="DQdisk1" value="" type="text">
					</div>
				</div>
				<div class="form-group row">
				  <label for="staticEmail" class="col-sm-2 col-form-label">②当前色区:</label>
				  <div class="col-sm-6 col-sm-offset-4">
					<input readonly="" class="form-control-plaintext" id="DQdisk2" value="" type="text">
				  </div>
				</div>
				<div class="form-group row">
				  <label for="staticEmail" class="col-sm-2 col-form-label">③当前Bin:</label>
				  <div class="col-sm-6 col-sm-offset-4">
					<input readonly="" class="form-control-plaintext" id="DQdisk3" value="" type="text">
				  </div>
				</div>
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-2 col-form-label" for="inputDefault">請掃入需要校验的二维码:</label>
			<div class="col-sm-8">
				<input class="form-control" placeholder="Default input" id="diskNow" type="text">
			</div>
			<div class="col-sm-2">
				<p class="lead">
				<a class="btn btn-primary btn-lg" onclick="myFunction()" role="button">清线</a>
				</p>
			</div>
		</div>		
	</form>	
	<p class="lead">
		<a class="btn btn-primary btn-lg" href="index.html" role="button">返回</a>
	</p>
	</div>
    <script src="./_vendor/jquery/dist/jquery.min.js"></script>
    <script src="./_vendor/popper.js/dist/umd/popper.min.js"></script>
    <script src="./_vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./_assets/js/custom.js"></script>
	<script>
	var JZdisks;
	var DQdisks;
	var JZcks=new Array(3);
	var DQcks=new Array(3);
		$("#box").keypress(function(e){
		  console.log($("#box").val());
			$(JZdisk1).css('color', 'black');
			$(JZdisk1).val("");
			$(JZdisk2).css('color', 'black');
			$(JZdisk2).val("");
			$(JZdisk3).css('color', 'black');
			$(JZdisk3).val("");
			var key = e.which;
			if (key == 13){ 
				JZdisks=$("#box").val().split(" ");
				$(JZdisk1).val(JZdisks[0]);
				$(JZdisk2).val(JZdisks[1]);
				$(JZdisk3).val(JZdisks[2]);
			$("#diskNow").focus();
			}
		});	
		$("#diskNow").keypress(function(e){
		  console.log($("#diskNow").val());
			$(DQdisk1).css('color', 'black');
			$(DQdisk1).val("");
			$(DQdisk2).css('color', 'black');
			$(DQdisk2).val("");
			$(DQdisk3).css('color', 'black');
			$(DQdisk3).val("");
		  dk=$("#diskNow").val();
		  var key = e.which;
			if (key == 13) {
				DQdisks=$("#diskNow").val().split(" ");
				$(DQdisk1).val(DQdisks[0]);
				$(DQdisk2).val(DQdisks[1]);
				$(DQdisk3).val(DQdisks[2]);
				if ($("#box").val()==$("#diskNow").val()) {
					//document.getElementById("RGY").src="./picture/GREEN.jpg";//$("#RGY").attr("src","./picture/GREEN.jpg");
					cxt.clearRect(0,0,c.width,c.height); 
					cxt.fillStyle="#00FF00";
					cxt.beginPath();
					cxt.arc(100,100,100,0,Math.PI*2,true);
					cxt.closePath();
					cxt.fill();
				}else{
					//document.getElementById("RGY").src="./picture/RED.jpg";//$("#RGY").attr("src","./picture/RED.jpg");
					cxt.clearRect(0,0,c.width,c.height); 
					cxt.fillStyle="#FF0000";
					cxt.beginPath();
					cxt.arc(100,100,100,0,Math.PI*2,true);
					cxt.closePath();
					cxt.fill();
				}
				$( "#diskNow" ).select();
			}
		  });	
	</script>
	<script>
		function myFunction(){
			$(JZdisk1).css('color', 'black');
			$(JZdisk1).val("");
			$(JZdisk2).css('color', 'black');
			$(JZdisk2).val("");
			$(JZdisk3).css('color', 'black');
			$(JZdisk3).val("");
			$(DQdisk1).css('color', 'black');
			$(DQdisk1).val("");
			$(DQdisk2).css('color', 'black');
			$(DQdisk2).val("");
			$(DQdisk3).css('color', 'black');
			$(DQdisk3).val("");
			$(diskNow).css('color', 'black');
			$(diskNow).val("");
			//cxt.fillStyle="#FFFF00";//document.getElementById("RGY").src="./picture/YELLOW.jpg";//$("#RGY").attr("src","./picture/YELLOW.jpg");
			cxt.clearRect(0,0,c.width,c.height); 
			cxt.fillStyle="#FFFF00";
			cxt.beginPath();
			cxt.arc(100,100,100,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
			$( "#box" ).val("");
			$( "#box" ).focus();
			
		};
	</script>
  </body>
</html>
